<template>
  <div>
    <div id="centerRightChart" style="width:25vw; height: 400px;"></div> 
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: null
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let w = document.documentElement.clientWidth / 100;
      let w1 = document.documentElement.clientWidth / 120;
      this.chart = this.$echarts.init(document.getElementById("centerRightChart"));
      //  ----------------------------------------------------------------
      
      this.chart.setOption({
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#e7bcf3",
          "#8378ea"
        ],
        title: [ {
            text: '互补后发电量',
            left: '45%',
            top: 'bottom',
            textAlign: 'center',
            textStyle: {
              color: "#B4B4B4",
              fontSize: w,
              fontWeight: "normal"
            }
        }],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {d}%"
        },
         label: {
          formatter: "{b} : {d}%"
         },
       
        dataset: {
           source: [
            ['name','after'],
            ['谷段', 20, 25],
            ['早高峰', 30, 35],
            ['晚高峰', 30, 30],
            ['平段', 20, 10]
        ]},

        series: [ {
          
          type: 'pie',
          radius: '80vw',
          center: ['45%', '55%'],
          label:{            
                                      normal:{
                                          show:true,
                                          position:'inner', //标签的位置
                                          textStyle : {
                                             
                                              fontSize : w1    //文字的字体大小
                                          },
                                          formatter:'{b}:{d}%'

                                          
             }
          },
          value: 'after'
       }]
       
      });

    }
  }
};
</script>

<style lang="scss" scoped>
</style>